{% extends "bootstrap/base.html" %}
{% block title %}whenmgone{% endblock %}

{% block head %}
{{ super() }}
<!-- ico -->
<link rel="shortcut icon" href="{{ url_for('static',filename = 'ghost_ico.ico') }}" type="image/x-icon">
<!-- cdn css -->
<link href="//cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.css" rel="stylesheet">
<!-- self css -->
<link rel="stylesheet" href="{{ url_for('static', filename = 'contact.css') }}">

{% endblock %}

{% block content %}
<!-- navbar -->
<nav class="navbar container">
  <div class="col-md-4">
    <a href="/login"><h1>whenmgone</h1></a>     
  </div>
  <div class="col-md-2 col-md-offset-6">
    <br>
  
    {% if current_user.is_authenticated() %}
    <h5 class="login">{{ current_user.email }}</h5>
    {% else %}
      stranger
    {% endif %}    
  </div>

</nav>

<!-- register -->
<div class="container main_bd">
  <div class="stepbystep col-md-12">
    <ul class="nav navbar-nav col-md-12">
      <li class="step col-md-3 active">
        <a href="/contact">联系人</a>
      </li>
      <li class="step col-md-3">
<!--         <div id="triangle-right-active"></div> -->
        <a href="/lastwill">遗嘱</a>
      </li>
      <li class="step col-md-3">
        <!-- <div id="triangle-right"></div> -->
        <a href="/heatbeat">心跳</a>
      </li>
      <li class="step col-md-3">
        <!-- <div id="triangle-right"></div> -->
        <a href="/preview">预览</a>
      </li>

    </ul>
  </div>


<!-- 联系人添加页 -->
  <div class="contacts-add col-md-4">
  <form action="/contact" method="POST" class="form-horizontal">
    <h3>添加联系人</h3>
    <br>

    <div class="form-group">
      <!-- <label for="inputEmail3" class="col-sm-4 control-label">姓名</label> -->
      <div class="col-sm-8">
        {{ form.contact01Name(class="form-control",id="inputName",placeholder="姓名") }}
      </div>
    </div>

    <div class="form-group">
      <!-- <label for="inputEmail3" class="col-sm-4 control-label">手机号</label> -->
      <div class="col-sm-8">
        {{ form.contact01Phone(class="form-control",id="inputPhone",placeholder="手机") }}
      </div>
    </div>

    <div class="form-group">
      <!-- <label for="inputEmail3" class="col-sm-4 control-label">邮箱</label> -->
      <div class="col-sm-8">
        {{ form.contact01Mail(class="form-control",id="inputEmail",placeholder="联系人邮箱") }}
      </div>
    </div>

    <div class="form-group">
      <div class="col-sm-8">
        {{ form.submit(class="btn btn-default") }}
      </div>
    </div>
  </form>
  </div>

<div class="contacts-list col-md-4">
  <br>
  <br>
  <br>
  <br>
  {% if contact %}
  <div class="contact-list panel panel-default">
    <div class="panel-heading"><span class="glyphicon glyphicon-user" aria-hidden="true">  <strong>{{ contact.get('name') }}</strong></span></div>
    <div class="panel-body">
      <span class="glyphicon glyphicon-earphone" aria-hidden="true"></span>   <strong>{{ contact.get('phone') }}</strong>
      <br>
      <span class="glyphicon glyphicon-envelope" aria-hidden="true"></span>   <strong>{{ contact.get('mail') }}</strong>
    </div>
  </div>
  {% endif %}
</div>

<div class="contacts-help col-md-4">
  <div class="tip">
    <h6>Tip:</h6>
    <p>如果长时间通过各种渠道都联系不到您的话，我们会将您的遗嘱发送给这位联系人，请务必填写真实的联系人信息，并确保该联系方式有效。</p>
  </div>
</div>
</div>


<!-- footer -->
<footer class="footer">
    <div class="container">
    <hr>
        <p>Copyright © whenmgone 2015</p>
    </div>
</footer>

<script src="//cdn.bootcss.com/jquery/2.1.4/jquery.js"></script>
<script src="//cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.js"></script>

{% endblock %}